<!--管理员=》商家列表-->
<template>
	<div>
	  <MainContent>
		 <div class="content_title">
		 	<span style="color: #222222;font-size: 24px;font-weight: 400;">{{title}}</span>
		 	
		 </div>
		 <div class="table_content">
		 	<el-row>
				<button class="el-button mini addBuss" @click="addBuss"> 添加商家</button>
			   <el-table
		        ref="multipleTable"
		        :data="bussListData"
		        style='width: 99%;margin-top:70px;'
		        tooltip-effect="dark">
						
		        <el-table-column
		          align="center"
		          type='index'
							style='width:150px!important'
		          label="#">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="UserNo"
		          label="商家账号">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="PassWord"
		          label="密码">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          label="金币数量">
		          <template slot-scope="scope">
		          		<span v-html="scope.row.Gold"></span>
		            	<el-button
				              size="mini"
				              type='text'
				              style='color:#3185ff ;'
				              @click="modifyCoin(scope.$index, scope.row)">
				              <img src="../assets/img/edit.png" width="15" height="15"/>
				        </el-button>
				          
				   </template>
		        </el-table-column>
		       	
		        <el-table-column
		          align="center"
		          label="操作">
		          <template slot-scope="scope">
		            	<el-button
				              size="mini"
				              type='danger'
				              @click="delectBuss(scope.$index, scope.row)">删除</el-button>
				   </template>
		        </el-table-column>
		     </el-table>
		 	</el-row>
		 	
		 	<el-row style='margin-top: 20px;text-align: center;'>
			 	<el-pagination 
					  @current-change="handleCurrentChange"
					  :current-page="currentPage"
			    	   layout="prev, pager, next" 
			    	   page-size='10'
			    	  :total="allPage" 
			    	>
			    </el-pagination>
			</el-row>
		 </div>
		 
		 <el-dialog title="修改金币" :visible.sync="addBussCoinOpen" width='300px' center = 'true'>
		    <input class="el-input el-input1" type='text' v-model="coinNum"></input>
		    <div slot="footer" class="dialog-footer">
			    <el-button @click="addBussCoinOpen = false">取 消</el-button>
			    <el-button :disabled='ifSubmit' type="primary" @click="submitAddCoinNum">确 定</el-button>
			</div>
		</el-dialog>
		 <el-dialog title="添加商家" :visible.sync="addBussOpen" width='300px' center = 'true'>
		 	<el-form id='addBuss'>
		 		<el-form-item lable='账号'>
		 			<el-input type='text' v-model='buss.BusinessNo' name='BusinessNo' placeholder='请输入商家账号'></el-input>
		 		</el-form-item>
		 		<el-form-item lable='密码'>
		 			<el-input type='text' v-model='buss.PassWord' name='PassWord' placeholder='请输入密码'></el-input>
		 		</el-form-item>
		 		<el-form-item lable='金币'>
		 			<el-input type='text' v-model='buss.Gold' name='Gold' placeholder='请输入金币个数'></el-input>
		 		</el-form-item>
		 	</el-form>
		    <div slot="footer" class="dialog-footer">
			    <el-button @click="addBussOpen = false">取 消</el-button>
			    <el-button :disabled='ifSubmit' type="primary" @click="addBussGo">确 定</el-button>
			</div>
		</el-dialog>
      </MainContent>
   </div>
</template>
<script>
	import MainContent from '../components/main_content'
	import global from './global'
	export default {
    name: "UserBussList",
    inject:['reload'],
    mounted(){
    	this.initData('1');
    },
    data() {
    	return {
    		title: '商家管理',
    		bussListData: [],
    		addBussCoinOpen:false,
    		addBussOpen: false,
    		coinNum: '',
    		allPage: '',
    		currentPage: '1',
    		ifSubmit: false,
    		selectBussId: '',
				selectIndex: '',
    		buss:{
    			BusinessNo: '',
    			PassWord: '',
    			Gold: '',
    		},
    	}
    },
    components:{
    	MainContent
    },
    methods:{
    	initData(pageNum){
    		let _this = this;
    		global.$http({
						method:'get',
						url:global.urlAll+'ShowAllBusiness/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							Page: pageNum || '1',
							Row: '10'
						}
					}).then((res)=>{
						if(res.data.success == 'true'){
							_this.bussListData = res.data.data;
							_this.allPage = res.data.DateNum;
						}else{
							_this.$message(res.msg)
						}
					})
    	},
    	addBuss(){
    		this.addBussOpen = true;
    		
    	},
    	addBussGo(){
    		let addInfo = this.buss;
    		let _this = this;
    		if(addInfo.BusinessNo == ''){
    			this.$message('请填写商家账号')
    		}else if(addInfo.PassWord == ''){
    			this.$message('请填写密码')
    		}else{
    			let el =  document.getElementById('addBuss');
	    		let sendData = new FormData(el);
				let config = {
					           headers:{
					             	 'Content-Type':'application/x-www-form-urlencoded',
					              }
					         };
				const formRequest = global.$http.create({ 
				      			widthCredentials : true
				      		})
				formRequest.post(global.urlAll+'AddBusiness/',sendData,config).then((res)=>{
					if(res.data.success == 'true'){
						_this.$message('添加成功');
						this.addBussOpen = false;
						_this.initData();
					}else{
						_this.$message(res.data.data);
					}
				})
			}
    	},
    	delectBuss(index,row){
    		let _this = this;
    		let Id = row.BusinessId;
    		this.$confirm('是否确认删除?', '提示', {
		         confirmButtonText: '确定',
		         cancelButtonText: '取消',
		         type: 'warning'
		       }).then(() => {
    				global.$http({
						method:'get',
						url:global.urlAll+'DeleteBusiness/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							BusinessId: Id,
						}
					}).then((res)=>{
						if(res.data.success == 'true'){
							_this.$message('删除成功');
							_this.initData();
							
						}else{
							_this.$message(res.msg)
						}
					})
				})
    	},
    	modifyCoin(index,row){
    		this.addBussCoinOpen = true;
    		this.selectBussId = row.BusinessId;
				this.selectIndex = index;
    	},
    	submitAddCoinNum(){
    		if(this.coinNum == ''){
    			this.$message('修改数量不能为空')
    		}else{
    			this.ifSubmit = true;
    			let _this = this;
    			global.$http({
						method:'get',
						url:global.urlAll+'UpdateBusinessGold/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							Gold: _this.coinNum,
							BussinessId: _this.selectBussId,
						}
					}).then((res)=>{
						if(res.data.success == 'true'){
							this.ifSubmit = false;
    						this.addBussCoinOpen = false;
								_this.bussListData[_this.selectIndex].Gold = _this.coinNum;
								_this.coinNum = "";
								_this.$message("修改成功")
						}else{
							_this.$message(res.msg)
						}
					})
    			
    		}
    	},
    	handleCurrentChange(val){
    		let _this = this;
    		this.currentPage = val;
    		this.initData(val)
    	}
    },
   }
	
	
</script>

<style scoped="scoped">
	.content_title {
	padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    
  }
  .addBuss{
  	width: 150px;
  	height: 40px;
  	background: #1989FA;
  	color: #FFFFFF;
    font-weight: bold;
		float:right;
		margin-right:20px;
  }
  .table_content{
  	padding: 20px;
  	background: #FFFFFF;
  }
  tbody,thead {
	  width: 100% !important;
	}
	colgroup {
	  position: absolute;
	  width: 100% !important;
	  display: flex;
	}
	col {
	  flex: 1;
	  text-align: center;
	}
	.el-input1{
		height:36px;
		background:rgba(255,255,255,1);
		border:1px solid rgba(220,223,230,1);
		border-radius:4px;
		text-align: center;
	}
</style>